<template>
  <MainHeader
    @inputChange="inputChange"
    placeholder="搜索直播间名称、主播名称、房间号等……"
    title="直播间"
  ></MainHeader>
  <el-card class="live-card">
    <CreateBtn />

    <el-table :data="LiveInfo">
      <el-table-column label="最近开播" width="200">
        <template #default="scope">
          <div class="date">
            <!-- 日期转换 -->
            <div class="day">{{ formatDay(scope.row.start_time) }}</div>
            <div class="start-end">
              {{
                formatStartOrEndTime(scope.row.start_time, scope.row.end_time)
              }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="直播间信息">
        <template #default="scope">
          <div class="product-wrapper">
            <img class="product-cover" :src="scope.row.feeds_img" alt="" />
            <div class="product-right">
              <div class="product">{{ scope.row.name }}</div>
              <div class="room-id">房间号：{{ scope.row.roomid }}</div>
              <div class="anchor_name">主播：{{ scope.row.anchor_name }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="直播状态" width="180">
        <template #default="scope">
          {{ liveStatus[scope.row.live_status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="toControl(scope.row)" type="text"
            >控制台</el-button
          >
          <el-button
            type="text"
            :disabled="
              scope.row.live_status !== 101 ||
              scope.row.live_status !== 102 ||
              scope.row.live_status !== 103
            "
            >分享</el-button
          >
          <el-button
            @click="delLive(scope.row)"
            type="text"
            style="padding-left: 10px"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { getLiveInfo, DeleteRoom } from '@/service/main/main'
import { liveStatus } from '../config/liveStatus'
import { MainHeader } from '@/components/main-header/index'
import router from '@/router'

import CreateBtn from './CreateBtn.vue'

export default defineComponent({
  components: { CreateBtn, MainHeader },
  props: {},
  async setup() {
    // 1.请求数据
    const LiveInfoRes = await getLiveInfo(0, 10)

    let LiveInfo = LiveInfoRes.room_info
    const roomList = LiveInfoRes.room_info

    const formatDay = (item: number) => {
      const date = new Date(item * 1000)
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${month}月${day}日`
    }

    const formatStartOrEndTime = (start: number, end: number) => {
      const startDate = new Date(start * 1000)
      const hours1 = startDate.getHours()
      let minutes1: number | string = startDate.getMinutes()
      minutes1 = minutes1 < 10 ? '0' + minutes1 : minutes1

      const endDate = new Date(end * 1000)
      const hours2 = endDate.getHours()
      let minutes2: number | string = endDate.getMinutes()
      minutes2 = minutes2 < 10 ? '0' + minutes2 : minutes2
      return `${hours1}:${minutes1}-${hours2}:${minutes2}`
    }
    // 输入框改变
    let searchValue = ref('')

    const inputChange = (value: any) => {
      searchValue.value = value
      LiveInfo = roomList.filter((item: any) => {
        return (
          item.name.indexOf(value) !== -1 ||
          String(item.roomid).indexOf(value) !== -1 ||
          item.anchor_name.indexOf(value) !== -1
        )
      })
    }
    // 删除直播间
    const delLive = (event: any) => {
      const id = event.roomid
      DeleteRoom(id)
    }

    // 跳转到控制台
    const toControl = (event: any) => {
      // router.push('/main/live-control')
      const { roomid } = event
      router.push({
        name: 'liveControl',
        query: {
          roomid,
        },
      })
    }
    return {
      LiveInfoRes,
      LiveInfo,
      formatDay,
      formatStartOrEndTime,
      liveStatus,
      inputChange,
      searchValue,
      roomList,
      delLive,
      toControl,
    }
  },
})
</script>

<style scoped lang="less">
.live-card {
  min-height: 80vh;

  .product-number {
    font-size: 14px;
    color: #999;
    margin-bottom: 0.2rem;
  }

  .el-table {
    .date {
      .day {
        font-size: 0.24rem;
        margin-bottom: 0.1rem;
      }
    }

    .el-button {
      margin-right: 10px;
    }

    .product-wrapper {
      display: flex;
      align-items: center;

      .product-cover {
        width: 1rem;
        height: 1rem;
        margin-right: 0.2rem;

        img {
          width: 100%;
          border-radius: 5px;
        }
      }

      .product-right {
        .product {
          font-size: 0.18rem;
          margin-bottom: 0.1rem;
        }

        .room-id,
        .anchor_name {
          font-size: 0.14rem;
          color: #888;
        }
      }
    }

    .cell {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}
</style>
